<template>
	<view class="content" disableScroll="true">
		<canvas type="webgl" id="webgl" style="width: 100vw; height: 70vh;"></canvas>
		<!-- @touchstart="touchStart"
			@touchmove="touchMove" @touchend="touchEnd" -->
		<!-- <view class="text">
			<view class="icon" :style="{left: posX + 'px', top: posY + 'px'}" @touchstart="onTouchStart"
				@touchmove="onTouchMove" @touchend="onTouchEnd">

			</view>
		</view> -->
		<view class="body-touch">
			<view class="canvas-view" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">

			</view>
			<view class="icon" :class="{'background':iconCopy}" :style="{left: posX + 'px', top: posY + 'px'}"
				@touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
			</view>
			<view class="icon" :class="{'background':iconCopy}" v-if="isDragging"
				:style="{left: posX + 'px', top: posY - 60 + 'px'}">
			</view>

			<view class="position-view">
				{{JSON.stringify(intersectPoint) }}
			</view>
		</view>
	</view>
</template>

<script>
	import * as THREE from '@/common/threejs/three.weapp.js'
	import {
		test
	} from '@/common/test-cases/test.js'
	// 创建Raycaster对象
	var raycaster = new THREE.Raycaster();
	var mouse = new THREE.Vector2();
	export default {
		data() {
			return {
				startX: '',
				startY: '',
				posX: 25,
				posY: 0,
				isDragging: false,
				a: null,
				x: 0,
				y: 0,
				z: 0,
				width: 0,
				height: 0,
				iconCopy: false,
				intersectPoint: null
			}
		},

		onLoad: function() {
			let that = this
			uni.createSelectorQuery()
				.in(this)
				.select('#webgl')
				.node()
				.exec((res) => {
					let canvasId = res[0].node._canvasId
					console.log(res)
					const canvas = THREE.global.registerCanvas(canvasId, res[0].node)
					that.a = test(canvas, THREE)
					that.width = res[0].node._width
					that.height = res[0].node._height
					that.posY = res[0].node._height + 25

				})
		},

		methods: {

			touchStart(e) {
				THREE.global.touchEventHandlerFactory('canvas', 'touchstart')(e)

			},
			setModelPosition(e) {
				// 获取触摸点相对于屏幕的2D坐标
				mouse.x = (e.target.offsetLeft / this.width) * 2 - 1;
				mouse.y = -(e.target.offsetTop / this.height) * 2 + 1;
				console.log(e, 'mouse===', mouse, this.a.camera)
				// 将2D坐标转换为射线
				raycaster.setFromCamera(mouse, this.a.camera);
				console.log('raycaster', raycaster)
				// 检测射线和物体的相交情况
				var intersects = raycaster.intersectObjects(this.a.scene.children);

				if (intersects.length > 0) {
					// 获取第一个相交物体的位置
					var point = intersects[0].point;
					console.log("3D世界坐标：", point);
					let {
						x,
						y,
						z
					} = point
					this.a.addModel({
						x,
						y: 0,
						z
					})
					this.intersectPoint = {
						x,
						y: 0,
						z
					}
				}
			},
			touchMove(e) {
				THREE.global.touchEventHandlerFactory('canvas', 'touchmove')(e)
				console.log('触摸到了 ')
			},
			touchEnd(e) {
				THREE.global.touchEventHandlerFactory('canvas', 'touchend')(e)
			},
			onTouchStart(e) {
				this.startX = e.touches[0].clientX - this.posX;
				this.startY = e.touches[0].clientY - this.posY;
				this.isDragging = true;


			},
			onTouchMove(e) {
				if (this.isDragging) {
					this.posX = e.touches[0].clientX - this.startX;
					this.posY = e.touches[0].clientY - this.startY;

					if (this.posY < this.height) {
						this.iconCopy = true
					} else {
						this.iconCopy = false
					}

				}
			},
			onTouchEnd(event) {
				console.log(this.posX, this.posY, event)
				this.isDragging = false;

				if (this.posY < this.height) {
					// 渲染模型到canvas中
					this.setModelPosition(event)
					// icon归位
					this.posX = 25
					this.posY = this.height
				}
				this.iconCopy = false

			}
		}
	}
</script>

<style>
	.content {
		position: relative;
		height: 100vh;
		overflow: hidden;
		background-color: aquamarine;
	}

	.text {
		width: 100vw;
		height: 30vh;
		background-color: aquamarine;
		color: #000;
		position: absolute;
		z-index: 1;
	}

	.icon {
		width: 50px;
		height: 50px;
		background-color: pink;
		position: absolute;

	}

	.background {
		background-color: skyblue;
	}

	.body-touch {
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 99;
	}

	.canvas-view {
		width: 100vw;
		height: 70vh;
	}

	.position-view {
		width: 100%;
		height: 50px;
		background-color: aliceblue;
		color: #000;
		display: flex;
		align-items: center;
		justify-content: center;

		position: absolute;
		left: 0;
		bottom: 100px;
	}
</style>